<template>
  <div class="w-card content-box">
    <div class="otitle-box">
      <span>
        订单ID：{{ orderForm.sysOrderId || '' }}
      </span>
      <span :class="'oStatus oStatus'+orderForm.orderStatus">
        {{ getOrderStatus(orderForm.orderStatus) }}
      </span>
    </div>
    <div style="font-size: 14px;margin-top: 20px;">
      商户名称：{{ orderForm.shopName || '' }}
    </div>
    <div class="flext">
      <div>
        提现方式：{{ orderForm.payType == 2 ? '微信' : orderForm.payType == 3 ? '支付宝' : orderForm.payType == 11 ? '银行卡' : '' }}
      </div>
      <div>
        操作时间：{{ orderForm.createTime ? getDateTime(orderForm.createTime)[6] : '' }}
      </div>
    </div>
    <div class="flext">
      <div>
        提现账户：{{ orderForm.toAccount || '' }}
      </div>
      <div>
        提现金额(元)：{{ numFormat(orderForm.totalMoney) || '' }}
      </div>
    </div>
    <div class="flext">
      <div>
        手续费(元)：{{ numFormat(orderForm.serviceMoney) || '' }}
      </div>
      <div>
        实际到账(元)：{{ numFormat(orderForm.actualMoney) || '' }}
      </div>
    </div>
    <div class="flext">
      <div>
        操作人：{{ orderForm.userName || '' }}
      </div>
      <div>
        第三方流水号：{{ orderForm.transactionId || '' }}
      </div>
      <div>
        结果说明：{{ orderForm.resultMsg || '' }}
      </div>
    </div>
  </div>
</template>

<script>
import { onMounted, reactive, toRefs } from 'vue'
import api from '../api'
import { warningDeal, getDateTime, numFormat } from '@/utils/utils'
import { useRoute } from 'vue-router'
export default {
  setup() {
    const route = useRoute()

    const state = reactive({
      orderForm: {},

      orderStatusOptions: [
        {
          value: 1,
          label: '发起提现',
        },
        {
          value: 2,
          label: '已关闭',
        },
        {
          value: 3,
          label: '提现失败',
        },
        {
          value: 4,
          label: '提现成功',
        },
        {
          value: 5,
          label: '待人工处理',
        },
      ],
    })

    function getOrderDetail(sysOrderId) {
      const obj = {
        sysOrderId
      }
      api.withdrawOrderDetail(obj).then(res => {
        if (res.code == '200') {
          state.orderForm = res.data
        } else {
          warningDeal(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }

    function getOrderStatus(orderStatus) {
      let res = ''
      state.orderStatusOptions.map(item => {
        if (item.value == orderStatus) {
          res = item.label
        }
      })
      return res
    }

    onMounted(() => {
      const sysOrderId = route.query.sysOrderId
      getOrderDetail(sysOrderId)
    })

    return {
      ...toRefs(state),
      getOrderStatus,
      getDateTime,
      numFormat,
    }
  }
}
</script>

<style lang="scss" scoped>
.flext {
  display: flex;
  align-items: center;
  font-size: 14px;
  margin-top: 20px;
  > div {
    width: 400px;
  }
}
.oStatus {
  display: flex;
  align-items: center;
  gap: 5px;
  &::before {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
  }
}
.oStatus1 {
  color: #e6a23c;
  &::before {
    background-color: #e6a23c;
  }
}
.oStatus2 {
  color: #b7b9bd;
  &::before {
    background-color: #b7b9bd;
  }
}
.oStatus3 {
  color: #f04134;
  &::before {
    background-color: #f04134;
  }
}
.oStatus4 {
  color: #00a854;
  &::before {
    background-color: #00a854;
  }
}
.oStatus5 {
  color: #e6a23c;
  &::before {
    background-color: #e6a23c;
  }
}

.otitle-box {
  display: flex;
  align-items: center;
  gap: 20px;
  > span:first-of-type {
    font-size: 20px;
    font-weight: bold;
  }
  > span:last-of-type {
    font-size: 14px;
  }
}
</style>